<template>
	<view class="content">
		<view class="finishch">
			<view class="section-0">
				<view class="section-body">
					<view class="problem-wrapper" v-show="list.length < 1">
						<image src="https://www.mescroll.com/img/mescroll-empty.png"></image>
						<view class="">~ 空空如也 ~</view>
					</view>
					<view class="list">
						<view :class="`item ${item.show ? 'item__expand' : ''}`" v-for="(item, index) in list" :key="index">
							<view class="parent" @click="expandChange(item.draw_name)">
								<view class="action">
									<view class="iconfont icon-xiangyou1"></view>
								</view>
								<view class="id">{{ index + 1 }}</view>
								<view class="name">{{ item.draw_name }}（{{item.total}}册）</view>
							</view>
							<view class="child" v-if="item.show">
								<view class="child-item" @click="go(item2)" v-for="(item2, idx) in item.data" :key="idx">
									<view class="box">
										<view class="top">
											<view class="right">
												<view class="ids">{{ item2.number }}</view>
												<view class="name">{{ item2.name }}</view>
											</view>
											<view class="name">负责人:{{ item2.charge_person }}</view>
										</view>
										<view class="bottom">
											<view class="name">计划时间:{{ item2.plan_time ? item2.plan_time.substring(0, 10) : '-'}}</view>
											<view class="name">实际时间:{{ item2.actual_time? item2.actual_time.substring(0, 10) : '-' }}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { aMaterIalsChildrenList } from '@/api/project_manage.js'
import { mapGetters } from 'vuex'
export default {
	data() {
		return {
			id: '',
			list: [],
		}
	},
	computed: {
		...mapGetters({
			curProject: 'system/getCurProject'
		})
	},
	methods: {
		go(item2) {
			uni.navigateTo({
				url: 'constructionDetail?id=' + item2.id
			})
		},
		async expandChange(name) {
			const dep = JSON.parse(JSON.stringify(this.list))
			let _idx = undefined
			dep.forEach((item, idx) => {
				if (item.draw_name === name) {
					if (dep[idx].show) {
						dep[idx].show = false
					} else {
						dep[idx].show = true
						_idx = idx
						if (!dep[idx].data) {
							dep[idx].data = []
						}
					}
				}
			})
			if (_idx !== undefined && dep[_idx].data && dep[_idx].data.length === 0) {
				uni.showLoading({
					title: '加载中...'
				})
				const { data } = await aMaterIalsChildrenList({
					id: this.id
				})
				uni.hideLoading()

				dep[_idx].data = data.data
			}
			this.list = dep
		},

		handleSearch() {
			if (this.id) {
				aMaterIalsChildrenList({ id: this.id }).then(obj => {
					let data = obj.data.data
					this.list = data
				})
			} else {
				aMaterIalsChildrenList({ id: this.curProject.id }).then(obj => {
					let data = obj.data.data
					this.list = data
				})
			}
		}
	},
	onLoad(options) {
		this.id = options.id
		this.handleSearch()
	}
}
</script>

<style lang="scss" scoped>
.content {
	background-color: #2e5efe;
	.finishch {
		width: 100%;
		background-color: #0534d6;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		.section-0 {
			width: 100%;
			position: relative;
			z-index: 10;
			.section-body {
				width: 100%;
				height: 100%;
				border-top-left-radius: 50rpx;
				border-top-right-radius: 50rpx;
				background-color: #fff;
				overflow: hidden;
				.list {
					width: 100%;
					box-sizing: border-box;

					.item {
						width: 100%;
						// border-bottom: solid 2rpx #f2f2f0;
						padding-top: 50rpx;

						.parent {
							width: 90%;
							@include clear();
							padding-left: 40rpx;
							display: flex;
							.id {
								width: 80rpx;
								text-align: center;
								line-height: 50rpx;
								border-radius: 40rpx;
								color: #ffffff;
								font-size: 13px;
								background-color: #4574ff;
							}
							.name {
								width: 75%;
								line-height: 50rpx;
								margin-left: 20rpx;
								font-size: 13px;
								font-weight: normal;
								font-stretch: normal;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								letter-spacing: 2rpx;
								color: #3b3c40;
								float: left;
								word-break: break-all;
							}
							.action {
								float: left;
								width: 32rpx;
								margin-right: 18rpx;
								height: 100%;
								line-height: 50rpx;
								text-align: center;
								color: #3b3c40;

								.iconfont {
									font-weight: bold;
									font-size: 32rpx;
									transition: 0.2s ease;
									transform: rotate(90deg);
								}
							}
						}
					}
				}
			}
			.problem-wrapper {
				color: #808080;
				margin: 0 auto;
				text-align: center;
				image {
					margin-top: 300rpx;
					width: 200rpx;
					height: 200rpx;
				}
			}

			.child {
				width: 90%;
				margin-top: 40rpx;
				padding-left: 50rpx;
				padding-top: 10rpx;
				padding-bottom: 40rpx;
				background: #f2f2fa;
				.child-item {
					width: 95%;
					// border-bottom: 2rpx solid #e3e8f5;
					&:last-child {
						border-bottom: none;
					}
					.box {
						background-color: #ffffff;
						margin-top: 30rpx;
						padding: 20rpx 25rpx 15rpx 30rpx;
						border-radius: 30rpx;
						overflow: hidden;
						.top {
							display: flex;
							justify-content: space-between;
							font-size: 13px;
							margin-bottom: 10rpx;
							.right {
								display: flex;
								.ids {
									margin-right: 20rpx;
									color: #1736ab;
									font-weight: bold;
								}
							}
						}
						.bottom {
							display: flex;
							justify-content: space-between;
							font-size: 13px;
							color: #6c6c6e;
						}
					}
				}
			}
		}
	}
}
.cs {
	font-size: 15px;
	padding: 20px 0 20px 30px;
	color: #65a0f4;
}
.cs span {
	font-weight: bold;
	color: #ffffff;
	margin-left: 10px;
}
</style>
